<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/resources/layui/css/layui.css"/>
    <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/font/dtreefont.css">

</head>
<body>
<div style="padding: 20px 10px 0px">
    <fieldset class="layui-elem-field" shiro:hasPermission="role:view">
        <legend>查询条件</legend>
        <div class="layui-field-box">
            <form class="layui-form" action="" id="searchFrm">
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入角色名称" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">角色备注</label>
                    <div class="layui-input-inline">
                        <input type="text" name="remark" placeholder="请输入角色备注" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
</div>
<table id="roleTable" lay-filter="roleTable"></table>

<!--toolbar开始-->
<div id="tableToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="role:create" class="layui-btn" lay-event="add">添加</button>
    <!--<button type="button" class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>-->
</div>
<div id="cellToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="role:update" class="layui-btn layui-btn-sm layui-btn-xs" lay-event="update">修改</button>
    <button type="button" shiro:hasPermission="role:selectPermission" class="layui-btn layui-btn-sm layui-btn-xs" lay-event="dispatcherPermission">分配权限</button>
    <button type="button" shiro:hasPermission="role:delete" class="layui-btn layui-btn-danger layui-btn-sm layui-btn-xs" lay-event="delete">删除</button>
</div>
<!--toolbar结束-->

<!--添加修改弹出层开始-->
<form class="layui-form" id="addForm" lay-filter="addForm" action="" style="display: none;padding: 20px">


    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" required lay-verify="required" autocomplete="off"
                   placeholder="请输入角色名称"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">角色备注</label>
        <div class="layui-input-block">
            <input type="text" id="remark" name="remark" required lay-verify="required" autocomplete="off"
                   placeholder="请输入角色编码"
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">是否可用</label>
        <div class="layui-input-block">
            <input type="radio" name="available" value="1" title="可用" checked>
            <input type="radio" name="available" value="0" title="不可用">
        </div>
    </div>


    <div class="layui-input-block">
        <button type="submit" class="layui-btn" id="release" lay-submit="" lay-filter="release">保存</button>
        <button type="button" class="layui-btn layui-btn-danger" id="cancel">取消</button>
    </div>
</form>
<!--添加修改弹出层结束-->

<!--角色分配菜单弹出层开始-->
<div id="menuTreeDiv" STYLE="display: none">
    <ul id="menuTree" class="dtree" data-id="0"></ul>
</div>

<!--角色分配菜单弹出层结束-->

<script src="/resources/layui/layui.js"></script>
<script>
    var tableIns;
    layui.extend({
        dtree: '/resources/layui/layui-ext/dtree/dtree'
    }).use(['table', 'form', 'jquery', 'dtree'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        dtree = layui.dtree;

        dtree.render({
            elem: "#menuTree",
            url: "/role/loadMenuForRoleManager",
            // method: "get",
            checkbar: true,
            // dataFormat: "list",  //配置data的风格为list
            dataStyle: "layuiStyle"  //使用layui风格的数据格式
            , response: {
                message: "msg",
                statusCode: 0
            }
        });
        //第一个实例
        tableIns = table.render({
            elem: '#roleTable'
            , height: 312
            , url: '/role/loadAllRole' //数据接口
            , page: true //开启分页
            , toolbar: "#tableToolbar"
            , cols: [
                [ //表头
                    {width: 80, type: 'checkbox'}
                    , {field: 'id', title: 'ID'}
                    , {field: 'name', title: '角色名称'}
                    , {field: 'remark', title: '角色备注'}
                    , {
                    field: 'available', title: '是否可用', templet: function (data) {
                        return data.available == 1 ? '可用' : '不可用';
                    }
                }
                    , {title: '操作', width: 200, fixed: 'right', align: 'center', toolbar: '#cellToolbar'}
                ]
            ]
        });
        //弹出层的index
        var layerindex;

        //添加修改公用弹出层的路径
        var addFormUrl;


//监听事件
        table.on('toolbar(roleTable)', function (obj) {
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    addRole();
                    break;
                // case 'batchDelete':
                //     layer.msg('批量删除');
                //     var checkStatus = table.checkStatus('roleTable')
                //         , data = checkStatus.data;
                //
                //     layer.alert(JSON.stringify(data));
                //
                //     break;
            }
            ;
        });


        table.on('tool(roleTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.data.id);

            switch (obj.event) {
                case 'update':
                    updateRole(obj);
                    break;
                case 'delete':
                    deleteRole(obj);
                    break;
                case 'dispatcherPermission':
                    dispatcherPermission(obj);
                    break;
            }
            ;
        });

        /**
         *
         * 为角色分配权限
         */
        function dispatcherPermission(obj) {
            console.log(obj)
            layer.open({
                title: "为角色<" + obj.data.name + ">分配权限",
                type: 1,
                area: ['500px', '400px'],
                content: $('#menuTreeDiv'),
                btn: ['分配角色', '取消分配'],
                success: function(layero, index){
                    console.log("success");
                    console.log(obj.data.id)
                    //加载菜单树
                    dtree.render({
                        elem: "#menuTree",
                        url: "/role/loadPermissionMenuForXlTree?id="+obj.data.id,
                        // method: "get",
                        checkbar: true,
                        // dataFormat: "list",  //配置data的风格为list
                        dataStyle: "layuiStyle"  //使用layui风格的数据格式
                        , response: {
                            message: "msg",
                            statusCode: 0
                        }
                    });

                },
                yes: function (index, layero) {
                     var p = "?id="+obj.data.id;

                    var params = dtree.getCheckbarNodesParam("menuTree");
                    for (var i = 0; i < params.length; i++) {
                        var id = params[i].nodeId;
                        p+="&ids="+id;
                    }
                    $.post("/role/dispatcherPermissionForRole"+p,function (data) {
                        layer.msg(data.msg);
                    })
                }
                ,btn2: function (index, layero) {
                    layer.close(index)
                }

            })
        }

        /**
         *
         * 添加
         */
        function addRole() {
            layer.msg('添加');
            layer.open({
                title: '添加角色',
                type: 1,
                area: ['500px', '400px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    // 使下拉框为不弹出状态

                    $(this).removeClass("layui-form-selected");
                    $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                    //清空pid内容
                    layerindex = index;
                    // $.post("/role/loadMaxOrderNum", function (data) {
                    //     $("#ordernum").val(data);
                    // })
                    addFormUrl = "/role/addRole";
                }
            });
        }

        /**
         * 修改角色
         * @param obj
         */
        function updateRole(obj) {
            layer.open({
                title: '修改角色',
                type: 1,
                area: ['500px', '400px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    //装载默认数据

                    form.val("addForm", obj.data);

                    form.val("addForm", {available: obj.data.available + ""});

                    // $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                    // 下拉框回显
                    //设置下拉框里面的默认的上级角色的id
                    // dtree.dataInit("slTree", obj.data.pid);
                    //设置输入框里面的默认的上级角色名称
                    //获得当前选中的
                    // var param = dtree.getNowParam("slTree");
                    // $("#input_roleaccordiontree").val(param.context);


                    layerindex = index;
                    addFormUrl = "/role/updateRole";
                }
            });
        }


        /**
         *删除角色
         *
         */

        function deleteRole(obj) {
            layer.confirm("确定要删除{" + obj.data.name + "}吗?", {icon: 3, title: '提示'}, function (index) {

                $.post("/role/deleteRole", {id: obj.data.id}, function (data) {
                    layer.msg(data.msg)
                    if (data.code == 200) {
                        //刷新 树 表格 下拉树
                        //刷新表格
                        $("#doReset").click();
                        //刷新左侧树
                        // window.parent.left.reloadTree();
                        //刷新下拉树
                        // loadslTree();
                    }
                });
                layer.close(index);
            });
        }

        //
        // //弹出层下拉树开始
        //
        // function loadslTree() {
        //     var DTree = dtree.render({
        //         elem: "#slTree",
        //         method: "get",
        //         url: '/role/loadAllLeftMenuManagerTree',
        //         icon: "1",
        //         dataStyle: "layuiStyle",  //使用layui风格的数据格式
        //         accordion: true
        //         , response: {
        //             message: "msg",
        //             statusCode: 0
        //         }
        //     });
        // }

        // loadslTree();

        $("#roleaccordiontree").on("click", function () {
            $(this).toggleClass("layui-form-selected");
            $("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        dtree.on("node(slTree)", function (obj) {
            var param = dtree.getNowParam("slTree"); // 获取当前选中节点
            $("#pid").val(param.nodeId);
            $("#input_roleaccordiontree").val(obj.param.context);
            $("#roleaccordiontree").toggleClass("layui-form-selected");
            $("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        //弹出层下拉树结束


        //监控添加提交事件
        form.on("submit(release)", function (data) {
            var params = $("#addForm").serialize();
            var pid = $("#pid").val();
            $.post(addFormUrl, params, function (data) {
                layer.msg(data.msg);
            });

            //重置添加表单
            $("#addForm")[0].reset();
            //刷新表格 左侧树 弹出层表格
            // tableIns.reload();
            //刷新表格
            $("#doReset").click();
            //刷新左侧树
            // window.parent.left.reloadTree();
            //刷新下拉树
            // loadslTree();

            $(this).removeClass("layui-form-selected");
            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
            layer.close(layerindex);
        });
        $("#cancel").click(function () {
            $("#addForm")[0].reset();
            $(this).removeClass("layui-form-selected");
            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
            layer.close(layerindex)
            //清空pid内容
            $("#pid").val("");
        })

        //监听查询事件
        form.on("submit(doSearch)", function (data) {
            var params = $("#searchFrm").serialize();
            tableIns.reload({
                url: '/role/loadAllRole?' + params
                // ,where:{
                //     page:1
                // }
            })
            //刷新表格
            return false;
        });
        //监控重置事件
        $("#doReset").click(function () {
            tableIns.reload({
                url: '/role/loadAllRole?'
                // ,where:{
                //     page:1
                // }
            })
            //刷新表格
            return false;
        });

    });

    function reloadTable(roleid) {
        tableIns.reload({
            url: '/role/loadAllRole?id=' + roleid,
            // where:{
            //     page:1
            // }
        })
    }
</script>
</body>

</html>